<template>
  <div
    class="root-nav"
    :class="{ 'is-active': isActive }"
    ref="rootNav"
    @mouseenter="navMouseEnter"
    @mouseleave="navMouseLeave"
  >
    <div class="root-nav-cover">
      <Icon class="nav-icon" :custom="'wy-icon ' + item.iconName" />
      <span class="nav-title">{{ $srv.getI18nBySrv(item.title) }}</span>
    </div>
    <nav-sub
      v-if="item.menus.length !== 0"
      :style="navSubStyle"
      :subNavList="item.menus"
      :navSubLeft="navSubLeft"
      :compBoxInfo="GT_compBoxInfo"
    />
  </div>
</template>

<script lang="ts">
import { ifs, N_home, T_srv, ts, Tsrv, vue } from './config';
import navSub from './navSub.vue';

@T_srv.comp({
  components: {
    navSub
  }
})
export default class rootNav extends vue {
  @T_srv.prop({ required: true }) readonly item!: N_home.navRootEle;

  // 父组件compBoxInfo
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ifs.I_compBox;

  private G_compID: string;

  private navSubStyle = {
    display: 'none',
    left: '',
    top: '',
    transition: 'ease-in-out 0.2s',
    opacity: 1,
    transform: 'scaleX(1)'
  };

  // private navSubLeft: number = 160;
  private navSubLeft: number = 50;

  private isActive = false;

  private timeout: any = false;

  created() {
    this.G_compID = Tsrv.utils.getGUID();
    // 如果外部有传入组件信息
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox = new ts.T_compBox(this.G_compID); // 使用本地实例
    } else {
      this.G_compID = this.compBoxInfo.compID;
      this.GT_compBox = this.compBoxInfo.TcompBox;
    }
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
  }

  mounted() {
    this.$bus.$on('navZoom', (val: boolean) => {
      this.navSubLeft = val ? 50 : 160;
    });
    this.GT_compBox.addCompMergeName(this.G_compID, 'rootNav', this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    // 接收菜单栏高亮事件
    this.$bus.$on('setMenuActive', (value: string) => {
      this.isActive = value === this.item.id;
    });
  }

  destroyed() {
    // 如果父组件传入的compBoxInfo则删除本文件产生的引用，反之是本组件产生的ID统一删除
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, ['rootNav']);
    }
  }

  // @T_srv.emit()
  // addTable(value: { funid: string; field: string; title: string }) {}

  public navMouseLeave(e: any) {
    if (e.target.children.length === 2) {
      clearTimeout(this.timeout);
      this.navSubStyle.display = 'none';
    }
  }

  public navsubMenuClick(value: { funID: string; funName: string }) {
    this.GT_compBox.getCompMergeName(this.G_compID, `home`).addTab(
      value.funName
    );
    this.navSubStyle.display = 'none';
  }

  public navMouseEnter(e: any): void {
    if (e.target.children.length === 2) {
      let top: number = e.target.getBoundingClientRect().top;
      this.navSubStyle = {
        display: 'block',
        left: `${this.navSubLeft}px`,
        top: '',
        transition: 'ease-in-out 0s',
        opacity: 0,
        transform: 'scaleX(0.8)'
      };
      this.$nextTick(() => {
        const navDiv = e.target.children[1];
        const triDiv = navDiv.children[0];
        const subNavHeight = navDiv.children[1].clientHeight; // subNav的高度
        const screenHeight = document.body.clientHeight; // 文档的高度

        top = top - subNavHeight / 2 + 23; // 未调整的menu最高点

        const distance = screenHeight - subNavHeight; // 比较数
        if (distance < top) {
          // 未调整menu下溢出
          triDiv.style.top = `${top - distance + subNavHeight / 2 - 23}px`; // 三角的位置
          top = distance; // subNav的新位置
        } else if (top < 0) {
          // 未调整menu上溢出
          triDiv.style.top = `${top + subNavHeight / 2 - 23}px`;
          top = 0;
        } else {
          triDiv.style.top = `${subNavHeight / 2 - 23}px`; // 三角的位置
        }
        this.navSubStyle = {
          display: 'block',
          top: `${top}px`,
          left: `${this.navSubLeft}px`,
          transition: 'ease-in-out 0s',
          opacity: 0,
          transform: 'scaleX(0.8)'
        };
        this.timeout = setTimeout(() => {
          this.navSubStyle = {
            display: 'block',
            top: `${top}px`,
            left: `${this.navSubLeft}px`,
            transition: 'ease-in-out 0.2s',
            opacity: 1,
            transform: 'scaleX(1)'
          };
        }, 5);
      });
    }
  }
}
</script>

<style scoped lang="scss">
.root-nav {
  font-size: 14px;
  height: 46px;
  width: 160px;
  cursor: pointer;
  transition: ease-in-out 0.1s;
  overflow: visible;
  &:hover {
    background-color: var(--nav-hover-bg-color);
    .nav-title {
      font-weight: bold;
      color: var(--nav-hover-font-color);
    }
  }
  &.is-active {
    background-color: var(--nav-hover-bg-color);
    .nav-title,
    .nav-icon {
      color: var(--nav-hover-font-color);
    }
  }
  .root-nav-cover {
    height: 100%;
    width: 100%;
    position: relative;
  }
}
.nav-title {
  position: absolute;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 46px;
  right: 0;
  top: 0;
  width: calc(100% - 50px);
  color: var(--nav-font-color);
  transition: var(--animation-themechange);
}
.nav-icon {
  margin: 8px 10px;
  width: 30px;
  height: 30px;
  color: var(--nav-font-color);
  transition: var(--animation-themechange);
  font-size: 18px;
  line-height: 30px;
  &:hover {
    color: var(--nav-font-color);
  }
}
</style>
